<!--  -->
<template>
  <div>
    <el-container class="screening-box">
      <el-form
        :inline="true"
        class="form"
        ref="form"
        label-position="right"
        label-width="100px"
      >
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button
              class="tlwok-btn"
              type="primary"
              @click="getList"
            >查询</el-button>
            <el-button class="tlwok-btn" type="primary" plain @click="name = ''">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="搜索名称：" prop="name">
            <el-input v-model.trim="name" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>

    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>权限组
        </span>
        <div>
          <el-button
            class="filing-button"
            type="primary"
            icon="el-icon-plus"
            @click="addRoleGroup"
          >添加权限组</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="tableHeaderColor"
        :cell-style="tableCellStyle"
      >
        <el-table-column label="序号" prop="id"  width="180"></el-table-column>
        <el-table-column label="名称" prop="name" ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="primary"
                       @click="editRoleGroup(scope.row)">修改</el-button>
            <el-button type="primary"  @click="delRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-handler" v-if="tableData.length>0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.startPage"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      :title="rgdTitle"
      :visible.sync="roleGroupDialogVisible"
      center
    >
      <el-form
        :validate-on-rule-change="false"
        :inline-message="true"
        :rules="rules"
        ref="roleForm"
        class="user-info-form"
        label-width="150px"
        :model="roleGroupData"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="roleGroupData.name"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="userRoleIdList">
          <el-checkbox-group v-model="roleGroupData.userRoleIdList">
            <el-checkbox v-for="(item , i) in userRoleList"
                         :key="item.id"
                         :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="roleGroupDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="toDoRoleGroup"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import md5 from 'js-md5'
export default {
  name: 'Role',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        tableData : [],
        pageInfo: {
            total: 0,
            pageSizeArr: [10, 20, 30, 40],
            size: 10, //分页页面数量大小
            startPage: 1 //开始页码
        },
        name : '',
        showScreening: true,
        roleGroupDialogVisible : false,
      userRoleList : [],
      roleGroupData : {
          id : 0,
          name: '',
          userRoleIdList : []
      },
      rgdTitle : "",
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        userRoleIdList: [
          {required: true, message: '请选择权限', trigger: 'blur'},
        ],
      }
    }
  },

  mounted() {
    this.getUserRoleList()
    this.getList()
  },
  created(){
    // this.getUserRoleList()
    // this.getList()
  },
  //方法集合
  methods: {
    getUserRoleList(){
      this.$axios.get(
              `/api/manage/role/getAllUserRole`
      ).then(res => {
        if (res.success) {
          this.userRoleList = res.result
        } else {
          this.$message.error(res.desc)
          this.$router.back()
        }
      })
    },
    toDoRoleGroup(){
      console.log('this.roleGroupData' , this.roleGroupData)
      this.$refs['roleForm'].validate((valid) => {
        if (valid) {
          if(this.roleGroupData.id == 0){
            //新增
            this.$axios.post(
                    `/api/manage/role/createRoleGroup`,
                    {name : this.roleGroupData.name , userRoleIdList : this.roleGroupData.userRoleIdList}
            ).then(res => {
              if (res.success) {
                this.$message.success('操作成功')
                this.roleGroupDialogVisible = false
                this.getList()
              } else this.$message.error(res.desc)
            })
          }
          else{
            this.$axios.post(
                    `/api/manage/role/updateRoleGroup`,
                    {roleGroupId : this.roleGroupData.id ,
                      name : this.roleGroupData.name , userRoleIdList : this.roleGroupData.userRoleIdList}
            ).then(res => {
              if (res.success) {
                this.$message.success('操作成功')
               this.roleGroupDialogVisible = false
                this.getList()
              } else this.$message.error(res.desc)
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addRoleGroup(){
      this.rgdTitle = '添加权限组'
      this.roleGroupData =  {
        id : 0,
        name: '',
        userRoleIdList : []
      }

      this.roleGroupDialogVisible = true
    },
    editRoleGroup(item){
      console.log('item' , item)
      this.rgdTitle = '修改权限组'
      this.$axios.post(
              `/api/manage/role/getUserRoleByRoleGroup`,
              {roleGroupId : item.id}
      ).then(res => {
        if (res.success) {
          let ids = []
          res.result.forEach(item=> {
            ids.push(item.id)
          })
          this.roleGroupData =  {
            id : item.id,
            name: item.name,
            userRoleIdList : ids
          }
          this.roleGroupDialogVisible = true
        } else this.$message.error(res.desc)
      })
    },
      toPowerPage(id , name){
          this.$router.push({ path: 'Power', query: { id: id , name : name }})
      },
    delRole(item) {
          let id = item.id
          this.$confirm(`确定删除【${item.name}】权限组吗？该操作将会删除所有信息`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              if(id){
                  this.$axios.post(
                      `/api/manage/role/del`,
                          {id : id}
                  ).then(res => {
                      if (res.success) {
                          this.$message.success("删除成功")
                          this.search()
                      } else this.$message.error(res.desc)
                  })
              }
              else {
                  this.$message.error('ID错误');
              }
          })
      },
       search : function() {
          this.pageInfo = {
              total: 0,
                  pageSizeArr: [10, 20, 30, 40],
                  size: 10, //分页页面数量大小
                  startPage: 1 //开始页码
          };
          this.getList()
      },
    getList : function () {
        this.$axios.get(
                `/api/manage/role/getGroupRoleList?size=${this.pageInfo.size}&startPage=${this.pageInfo.startPage}&name=${this.name}`
            )
            .then(res => {
                if (res.success) {
                    this.pageInfo.total = res.result.total
                    this.pageInfo.size = res.result.pageSize
                    this.tableData = res.result.list
                } else this.$message.error(res.desc)
            })
    },
      // 分页数量大小设置
      handleSizeChange(val) {
          this.pageInfo.size = val
          this.pageInfo.startPage = 1
          this.getList()
      },
      // 分页当前页设置
      handleCurrentChange(val) {
          this.pageInfo.startPage = val
          this.getList()
      },
      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
      },
      // 修改table tr行的样式
      tableCellStyle({ row, column, rowIndex, columnIndex }) {
          return 'text-align:center'
      },
  }
}
</script>


<style lang="less" scoped>
  .title {
    font-weight: bold;
  }
  .grey {
    color: #bbb;
  }
  .red {
    color: red;
  }
  .screening-box {
    border: 1px solid #ddd;
    .form {
      width: 100%;
    }
  }
  .screening-head {
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toggle {
      cursor: pointer;
      margin-right: 50px;
    }
  }
  .screening-body {
    border-top: 1px solid #ddd;
  }
  .btn-box {
    margin-top: 40px;
    .number {
      color: red;
    }
    .el-button--primary {
      .number {
        color: #fff;
      }
    }
  }
  .table-title {
    height: 47px;
    line-height: 47px;
    padding: 0 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .filing-button {
      margin-left: 30px;
    }
  }
  .table-box {
    border: 1px solid #ddd;
    margin-top: 30px;
    .el-tag {
      margin: 2px;
      cursor: default;
    }
  }
  .table-handler {
    padding: 5px 15px;
    text-align: right;
    .check-all {
      margin-right: 20px;
    }
  }
  .hasEdit {
    position: absolute;
    top: 0;
    left: 0;
    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 30px solid red;
      border-right: 30px solid transparent;
    }
    .text {
      position: absolute;
      top: -3px;
      left: 2px;
      color: #fff;
      font-size: 12px;
    }
  }
  .user-info-form {
    .el-select,
    .el-input {
      width: 300px;
    }
    .tags {
      width: 450px;
    }
    .el-tag {
      cursor: pointer;
      margin-right: 15px;
    }
  }
  .tags-dialog {
    .el-tag {
      margin-right: 15px;
      margin-bottom: 15px;
      &:last-child {
        margin-right: 30px;
      }
    }
    .button-new-tag {
      margin-bottom: 15px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      color: #5aa3e5;
      border-color: #bddaf5;
      background: #eff6fc;
      &:focus,
      &:hover {
        color: #fff;
        background: #5aa3e5;
        border-color: #5aa3e5;
      }
    }
    .input-new-tag {
      width: 90px;
      margin-bottom: 15px;
      vertical-align: bottom;
    }
  }
  .upload-box {
    display: inline-block;
  }
</style>
<style>
  .input-new-tag .el-input__inner:focus {
    border-color: #bddaf5;
  }
</style>
